<template>
    <!-- 弹窗块 -->
    <!-- <uni-popup v-model="consult" position="bottom" class="modules coupon_mask" ref="vPopup"> -->
    <uni-popup ref="popup" type="bottom" maxHeight="100vh" width="100vw" class="modules coupon_mask">
        <div id="registerNow" class="register-now">
			<image class="closemask" :src="`${constant.imgUrl}common/close.png`" @click="closemask"></image>
            <!-- <a class="closemask" @click="closemask()">
                <img :src="constant.imgUrl + 'design/addfriclose.png'" alt />
            </a>-->

            <slot>
                <div class="mask_title">现在报名，还有机会现场砸金蛋</div>
            </slot>
            <div class="mask_body">
				<!--  #ifdef H5 -->
                <div class="mask_input">
                    <input type="text" v-model="mobile" @blur="resetInput" placeholder="请输入手机号码" />
                    <input type="text" v-model="name" @blur="resetInput" placeholder="请问我们该如何称呼您" />
                </div>
				<div class="send_coupon_btn" @click="signBtn">立即报名</div>
				<!--  #endif -->
				<!--  #ifdef MP-WEIXIN -->
				<get-phone-number @cbFn="prebook">
					<div class="send_coupon_btn">{{btnTxt}}</div>
				</get-phone-number>
				<!--  #endif -->

            </div>
        </div>
    </uni-popup>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { addCart } from '@/api/cart'
import { verifiPhone } from '@/utils/common'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
export default {
	name: 'coupon',
	components: {
		uniPopup,
		getPhoneNumber
	},
	data() {
		return {
			constant: this.$constant,
			consult: false,
			mobile: '',
			name: '',
			currentQuery: '',
			btnTxt: '立即报名'
		}
	},
	props: {
		source: {
			type: String,
			default: '活动报名'
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	methods: {
		showMask() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			const wxMobile = uni.getStorageSync('wxMobile') || ''
			this.mobile = wxMobile
			this.$refs.popup.open()
			// #ifdef MP-WEIXIN
			this.prebook()
			// #endif
		},
		closemask() {
			// 关闭弹框
			this.$refs.popup.close()
		},
		// clickInput() {
		//     setTimeout(function() {
		//         document.body.scrollTop = document.body.scrollHeight
		//     }, 300)
		// },
		resetInput() {
			// $('html,body').animate({ scrollTop: $('.wrap_common').offset().top }, 100)
		},
		prebook() {
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile) {
				return
			}
			const params = {
				mobile_phone: mobile,
				prebook_source: this.source,
				owner_user_id: this.userInfo.user_id
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}
			addCart(params).then(res => {
				this.btnTxt = '报名成功'
				uni.showToast({
					title: '报名成功',
					icon: 'success',
					complete: () => {
						setTimeout(() => {
							this.closemask()
						}, 1500)
					}
				})
			})
		},
		signBtn() {
			if (this.mobile == '') {
				this.$toast('请输入手机号码！')
				return false
			}
			if (!verifiPhone(this.mobile)) {
				this.$toast('请输入正确的手机号码！')
				return false
			}
			if (this.name == '') {
				this.$toast('请输入名字！')
				return false
			}

			let params = {
				mobile_phone: this.mobile,
				name: this.name,
				prebook_source: this.source,
				owner_user_id: this.userInfo.user_id
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}

			addCart(params).then(res => {
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				})
				this.mobile = ''
				this.closemask()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.register-now {
    background-color: #fff;
	padding-bottom: 30px;
    .modules {
        // height: 730px;
        // overflow: hidden;
        border-radius: 26px 26px 0 0;
    }
    //   弹窗
    .mask_body {
        padding: 0 40px;
    }
    .mask_title {
        height: 100px;
        line-height: 100px;
        font-size: 36px;
        text-align: center;
    }
    .mask_input {
        input {
            width: calc(100% - 30px);
            height: 90px;
            border-radius: 50px;
            padding-left: 30px;
            outline: none;
            -webkit-appearance: none;
            background-color: #f5f5f5;
            border: 2px solid #ddd;
            font-size: 28px;
            color: #333;
            margin-top: 20px;
        }
    }
    .send_coupon_btn {
        text-align: center;
        padding: 16px 0;
        color: #fff;
        font-size: 40px;
        border-radius: 50px;
        background: linear-gradient(#ff5b95, #ff3249);
        margin-top: 20px;
    }
}
</style>
